<template>
	<view class="u-page">
		<uv-navbar title="Faire une demande de prêt"/>
		<image class="login-bg" src="/static/images/page-background.png" ></image>
		<view class="login-wrap">
			<image class="tip"  src="/static/images/Group_270.png" ></image>
			<view class="intro">
				<uv-text
					class="tip-content" 
					bold
					text="Cher utilisateur, bonjour ! " />
			</view>
			<view class="uv-p-lr-40 uv-m-t-20 uv-m-b-50">
				<uv-text 
					text="Nous sommes désolés que Prêt Sécurisé ne vous ait pas satisfait. Veuillez d'abord vérifier les informations de votre téléphone avant de clôturer votre compte." />
				
			</view>
			
			<uv-form class="login-form" labelPosition="top" 
				:model="form" :rules="rules" ref="form" :borderBottom="false" labelWidth="auto"
				 :labelStyle="{color:'#6B5641',fontSize:'28rpx'}"
				>
				<uv-form-item label="la région" prop="region">
					<!-- <uv-input v-model="form.region" border="surround" placeholder="Veuillez sélectionner la région d'annulation" /> -->
					<view class="w100 uv-input uv-border uv-input--radius uv-input--square uv-padding-20">
						<text class="" :class="form.region?'text-black':'text-placeholder'">{{form.region||"Veuillez sélectionner la région d'annulation"}}</text>
					</view>
				</uv-form-item>
				<uv-form-item label="numéro de téléphone" prop="phone" >
					<uv-input type="number" maxlength="11" v-model="form.phone" border="surround" placeholder="Veuillez entrer votre numéro de téléphone" />
				</uv-form-item>
				<uv-form-item label="captcha img" prop="img_verify" >
					<uv-input  maxlength="4" v-model="form.img_verify" border="surround" placeholder="Veuillez entrer le captcha img" >
						<template v-slot:suffix>
							<view class="uv-flex">
								<image :src="codeImg" style="width: 140rpx;height: 70rpx;" @click="getCode" />
								<uv-icon name="/static/images/refresh.png" @click="getCode"/>
							</view>
							
						</template>
					</uv-input>
				</uv-form-item>
				<uv-form-item label="code de vérification à 4 chiffres" prop="verify" >
					<uv-input  type="number" v-model="form.verify" maxlength="4" border="surround" placeholder="le code de vérification à 4 ch..." >
						<template v-slot:suffix>
							<send-sms 
								imgVerify 
								:phone="form.phone"
								:imgVerifyContent="form.img_verify"
								:imgCompareContent="securityCode"
							/>
						</template>
					</uv-input>
				</uv-form-item>
				
			</uv-form>
			
			<view class="btns-foot">
				<view class="btn-foot">
					<view class="btn-group uv-p-30">
						<button class="cu-btn block bg-coffee round text-white" :disabled="getDisabled" @click="handleSubmit">
							Confirmer
						</button>					
					</view>
				</view>
			</view>
			
			
		</view>
		
		<uv-picker 
			ref="picker" :columns="columns" @confirm="confirm"
			cancelText="Cancel"
			confirmText="Confrim"
		></uv-picker>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				form:{
					region:"",
					phone:'',
					img_verify:'',
					verify:'',
				},
				codeImg:'',
				rules:{
					
				},
				securityCode:'',
				columns:[
					["Côte d'Ivoire"]
				]
			}
		},
		computed:{
			getDisabled(){
				return !(this.form.region && this.form.phone && this.form.img_verify && this.form.verify)
			}
		},
		onLoad(options){
			this.form.region = this.vuex_country
			this.form.phone = this.vuex_mobile
		},
		onShow() {
			
		},
		mounted() {
			this.getCode()
		},
		methods: {
			getCode(e){
				// this.securityCode = ""+uni.$uv.random(1000, 9999)
				//亚层前缀ddz，亚层后缀ddzaz以及末层前缀ddzjk
					console.log('+++++1111++++')
				this.$network('/ddzcaptchaddzaz/ddzjkgetCaptcha',{
					mobile: this.form.phone,
					scenes: 'logOff'
				}).then(res=>{
					this.codeImg = 'data:image/png;base64,' +this.$arrayBufferToBase64(res)//'data:image/png;base64,' + btoa(new Uint8Array(res).reduce((data, byte) => data + String.fromCharCode(byte), ''))
				}).catch(err=>{
					console.error(err)
				})
			},
			confirm(e){
				console.log(e)
				this.form.region = e.value[0]
			},
			
			handleSubmit(){
				
				this.submitLoading = true;
				this.$network('/ddzsecurityddzaz/ddzjkunsubscribe',{
					smsCode:this.form.img_verify,
					captcha:this.form.verify,
					mobile:this.form.phone
				},()=>{
					this.submitLoading = false;
				}).then(res=>{
					
					if(res.code == '0000'){
						uni.navigateTo({
							url: '/pages/account/destroy-result?state=3'
						})
					}else{
						uni.showToast({
							title:res.msg,
							icon:'none'
						})
					}
					
				})
				
				
			},
		}
	}
</script>

<style lang="scss" scoped>
	.u-page {
		width: 100%;
		height: 100vh;
		overflow: hidden;
		position: relative;
	}

	.login-bg {
		width: 100%;
		height: 100vh;
		position: absolute;
		bottom: 0;
	}

	.login-wrap {
		width: 100%;
		height: 100vh;
		position: absolute;
		top: 0;
		z-index: 2;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 100rpx 0rpx 300rpx;
		.tip{
			width: 100rpx;
			height: 100rpx;
			margin: 40rpx 0 20rpx 0;
		}
		.tip-content{
			// padding: 50rpx 50rpx;
		}
		.content-intro{
			background-color: white;
			border-radius: 20rpx;
			width: 100%;
			padding: 40rpx 20rpx;
			
			.uv-steps-item__line{
				background: white;
			}
			.uv-steps-item__wrapper--column--dot{
				
			}
		}
		.login-form {
			background-color: white;
			border-radius: 20rpx;
			width: 100%;
			padding: 40rpx 20rpx;

			.u-field-group {
				min-height: 100rpx;
				display: flex;
				align-items: center;
			}
		}

		.u-field-button {
			width: 100%;
		}

		.login-text {
			text-align: center;
			margin-top: 30rpx;
			text {
				font-size: 26rpx;
			}
			view {
				font-size: 48rpx;
				font-weight: 700;
			}
		}
	}
	.btn-group {
		.cu-btn {
			width: 100%;
			width: 600rpx;
			height: 96rpx;
			border-radius: 20rpx;
		}
	}
</style>